<template>
    <el-dialog title="订单详情" :visible.sync="value" :before-close="close">
        <div class="orderBox">
            <i class="el-icon-success" style="font-size: 30px;color:#79e192;margin-right:10px"></i><span
                style="line-height:30px;">出货成功</span>
            <img src="../1217.png" alt="">
        </div>
        <div class="orderBox-text">
            <div class="orderBox-text-left">
                <p>订单编号：0100000224162167366656483</p>
                <p>设备编号：01000002</p>
                <p>完成时间：2023.08.12 20:00:07</p>
                <p>设备地址：凯德MALL一层西门入口右侧</p>
            </div>
            <div class="orderBox-text-right">
                <p>商品名称：A酷儿橙汁 1.5L</p>
                <p>订单金额：0.01</p>
                <p>创建时间：2023.08.12 20:00:07</p>
                <p>支付方式：微信支付</p>
            </div>
        </div>
    </el-dialog>
</template>

<script>

export default {
    name: '',
    props: {
        value: {
            typeof: Boolean
        }
    },
    data() {
        return {
        }
    },
    methods: {
        close() {
            this.$emit('input', false)
        },
        headClass() {
            return 'background:#f3f6fb;color:#7d6666;font-weight:400;'
        },
    }
}
</script>

<style lang='scss' scoped>
* {
    padding: 0;
    margin: 0;
}

.orderBox {
    position: relative;
    width: 100%;
    height: 50px;
    background-color: #f8f8f8;
    padding: 5px 0 0 50px;
    margin-bottom: 20px;

    img {
        position: absolute;
        right: 50px;
        top: -10px;
    }
}

.orderBox-text {
    display: flex;

    p {
        margin: 15px 0;
    }

    .orderBox-text-left {
        width: 50%;
    }

    .orderBox-text-right {
        width: 50%;
    }
}
</style>